<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title></title>
        <script type="text/javascript">
            var basePath = "${basePath}";
        </script>
        <script type="text/javascript" src="${basePath}js/jquery/jquery-1.11.1.min.js" ></script>

        <script type="text/javascript" src="${basePath}js/charts/highcharts.js"></script>
        <!--
        <script src="http://code.highcharts.com/highcharts.js"></script>
        -->

    </head>

    <body>
        <div id="container" style="width: 100%; height: 95%; margin: 0 auto"></div>
        <script>
            $(document).ready(function() {
                var array = new Array();
                var value = new Array();
                $.ajax({
                    type:"get",
                    url: basePath + "report/bloodSugarCurveReport",
                    beforeSend: function(request) {
                        request.setRequestHeader("header", localStorage.getItem("token"));
                    },
                    data:{},
                    async:false,
                    cache:true,
                    dataType: "json", //this is important
                    success:function(data) {
                        $.each(data.measureTime, function(i, item) {
                            array[i] = item;
                        });
                        $.each(data.bloodSugarValue, function(i, item) {
                            value[i] = item;
                        });
                    },
                    error : function(data) {
                        alert("error:" + data);
                    }
                });

                var title = {
                    text: '近40次血糖波动图'
                };
                var subtitle = {
                    text: 'Source:自我采集'
                };
                var xAxis = {
                    categories: array//['2023-09-21','2023-09-22', '2023-09-25', '2023-09-26','2023-09-27']
                };
                var yAxis = {
                    title: {
                        text: '血糖值'
                    },
                    tickInterval:2// 刻度值
                };
                var plotOptions = {
                    line: {
                        step: false, // 默认值，确保曲线平滑
                        lineSmooth: true, // 确保曲线更平滑（Highcharts v7.0.0+ 支持）
                        dataLabels: {
                            enabled: true
                        },
                        enableMouseTracking: true,
                        events: {//监听点的鼠标事件
                            click: function () {
                                //ShowMaxSubValues(event.point.category);
                            }
                            //mouseOver:function() {
                        },
                        allowPointSelect: true,
                        cursor: 'pointer' //鼠标移到图表上时鼠标的样式
                    }
                };
                var series= [{
                    name: '血糖值',
                    data: value
                }
                ];

                var json = {};

                var chart = {
                    type: 'spline' // 设置为平滑曲线类型
                };
                //json.chart = chart;
                json.title = title;
                json.subtitle = subtitle;
                json.xAxis = xAxis;
                json.yAxis = yAxis;
                json.series = series;
                json.plotOptions = plotOptions;

                $('#container').highcharts(json);

            });
        </script>
    </body>

</html>